<template>

  <div class="login-page">
    <div class="container d-flex opacity-95  align-items-center position-relative py-5">
      <div class="card w-100 rounded ">
        <div class="card-body  p-0">
          <div class="row gx-0 align-items-stretch">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6 ">
              <div class="info d-flex justify-content-center flex-column p-4 h-100">
                <div class="py-5">
                  <h1 class="display-6 text-white"><span class="fw-bold fs-1">JackPay -- </span><span class="fs-4">注册</span></h1>
                  <p class="fw-light mb-1">让支付更简单.....</p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="login-panel col-lg-6">
              <div class="d-flex align-items-center px-4  h-100">
                <form class="login-form py-5 w-100">

                  <div class="return-log col-10 d-flex" @click="returnLogin">
                    <img src="https://cdn.iextend.top/pay/svg/arrow-left.svg"/>
                    <p class="pl-3 mt-3 fs-5" style="color: #2F80ED">去登录</p>
                  </div>

                  <div class="input-material-group mb-3 col-10 mx-auto">
                    <input v-model="registerData.account" class="input-material" placeholder="输入邮箱 或 手机号"/>
                    <span v-if="vaildAccount === 1" class="hint-text">用户账号 或 邮箱 不能为空哦</span>
                  </div>

                  <div class="input-material-group mb-3 col-10 mx-auto">
                    <input v-model="registerData.name" class="input-material" placeholder="用户名"/>
                    <span v-if="vaildName === 1" class="hint-text">请输入一个用户名</span>
                  </div>


                  <div class="input-material-group mb-2 col-10 mx-auto">
                    <div class="d-flex">
                      <input
                          v-model="registerData.pwd"
                          @input="pwdStrength"
                          class="input-material"
                          :type="showPassword === false ? 'text' : 'password'"
                          placeholder="输入密码">
                      <p class="w-40"></p>
                      <input
                          v-model="registerData.confirmPwd"
                          class="input-material"
                          :type="showPassword === false ? 'text' : 'password'"
                          placeholder="确认密码">
                      <p @click="togglePassword" class="eye-button">
                        <span v-if="showPassword === false"><img src="https://cdn.iextend.top/pay/svg/preview-open.svg"></span>
                        <span v-if="showPassword === true"><img src="https://cdn.iextend.top/pay/svg/preview-close-one.svg"> </span>
                      </p>
                    </div>
                    <div class="w-100  d-flex">
                      <span v-if="vaildPwd === -1" class="hint-text">密码不能为空哦</span>
                      <span v-if="vaildPwd === -2" class="hint-text">2处密码不一致哦</span>
                      <span v-if="vaildPwd === -3" class="hint-text">密码不足6位哦</span>
                      <span v-if="vaildPwd > 0"
                            :style="{'color': vaildPwd == 1 ? '#8B0000' : vaildPwd === 2 ? '#FFA500' : '#008000'}">
                        密码强度: {{vaildPwd === 1 ? '容易' : vaildPwd === 2 ? '一般' : '强' }}
                      </span>
                      <p class="w-40"></p>
                    </div>
                  </div>

                  <div class="input-material-group mb-3 col-10 mx-auto">
                    <div class="d-flex">
                      <input
                          v-model="registerData.verifyCode"
                          class="input-material"
                          placeholder="验证码">
                      <NButton class="send-code-btn" color="#2F80ED" @click="getVerifyCodeBtn" :disabled="initSecond > 0">
                        <span v-if="initSecond == 0">验证码</span>
                        <span v-if="initSecond > 0">{{initSecond}}后重发</span>
                      </NButton>
                    </div>
                    <span v-if="vailverify === 1" class="hint-text">验证码不能为空哦!</span>
                  </div>

                  <div class="input-material-group mb-2 col-6 mx-auto">
                    <NButton class="btnLogin w-100" color="#2F80ED" @click="handleRegisterSubmit">注册</NButton>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useNotification } from 'naive-ui';
import {registerAccountAPI, getVerifyCodeAPI} from "@/api";
import { resultCodeNotify } from '@/utils/rest/notifyHint'

const hint = useNotification();
const router = useRouter();
const sendType = 0;             // 发送验证码 类型为注册



const registerData = ref({account: "", pwd: "",  verifyCode: "", name: "", source: 0, confirmPwd: ""})

const showPassword = ref<boolean>(true)      // 是否显示密码
const timer = ref<ReturnType<typeof setInterval> | null>(null); // 初始化计时器引用
const initSecond = ref<number>(0);

const vaildAccount = ref<number>(0);          // 账号提示框
const vaildName = ref<number>(0);             // 用户提示
const vaildPwd = ref<number>(0);              // 密码提示
const vailverify = ref<number>(0);           // 验证账号

/**
 * 密码是否显示
 */
function togglePassword() {
  if (showPassword.value === false) {
    showPassword.value = true
  } else {
    showPassword.value = false
  }
}

/**
 * 验证账号
 */
function vailAccountVerify() {
  if(registerData.value.account === '') {
    vaildAccount.value = 1;
    return true;
  }
  vaildAccount.value = 0;
  const emailRegex = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
  if (!emailRegex.test(registerData.value.account)) {
    registerData.value.source = 1;
  } else {
    registerData.value.source = 0;
  }
}

/**
 * 密码强度
 */
function pwdStrength() {
  if (registerData.value.pwd === '') {
    vaildPwd.value = 0;
  }
  if (registerData.value.pwd.length > 7 && registerData.value.pwd.match(/([0-9])/)) {
    vaildPwd.value = 1;
  }
  if (registerData.value.pwd.length > 7 && registerData.value.pwd.match(/^(?=.*[a-zA-Z])/)) {
    vaildPwd.value = 2;
  }
  if (registerData.value.pwd.length > 7 && registerData.value.pwd.match(/^(?=.*[0-9])(?=.*[a-zA-Z])/)){
    vaildPwd.value = 2;
  }
  if (registerData.value.pwd.length > 7 && registerData.value.pwd.match(/^(?=.*[0-9])(?=.*[!,%,&,.,@,#,$,^,*,?,_,~])/)) {
    vaildPwd.value = 2;
  }
  if (registerData.value.pwd.length > 7 && registerData.value.pwd.match(/^(?=.*[a-zA-z])(?=.*[!,%,&,.,@,#,$,^,*,?,_,~])/)) {
    vaildPwd.value = 2;
  }
  if (registerData.value.pwd.length > 7
      && registerData.value.pwd.match(/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!,%,&,.,@,#,$,^,*,?,_,~])/)) {
    vaildPwd.value = 3
  }
}


/**
 * 初始化提示值
 */
function initHintParam(){
  vaildPwd.value = 0;
  vailverify.value = 0;
  vaildName.value = 0;
}

/**
 * 验证请求提交参数是否为空
 */
function vailRegisterParamVerify() {
  initHintParam();
  let verifyCode = false;
  if (vailAccountVerify()) {
    verifyCode = verifyCode || true;
  }
  if (registerData.value.verifyCode === '') {
    vailverify.value = 1;
    verifyCode = verifyCode || true;
  }
  if (registerData.value.name === '') {
    vaildName.value = 1;
    verifyCode = verifyCode || true;
  }
  if (registerData.value.pwd === '') {
    vaildPwd.value = -1;
    verifyCode = verifyCode || true;
  }
  if (registerData.value.pwd !== registerData.value.confirmPwd) {
    vaildPwd.value = -2;
    verifyCode = verifyCode || true;
  }
  if (registerData.value.pwd.length < 6) {
    vaildPwd.value = -3;
    verifyCode = verifyCode || true;
  }
  return verifyCode;
}

/**
 * 返回登录
 */
function returnLogin() {
  router.push("/login");
}

/**
 * 获得验证码
 */
async function getVerifyCodeBtn() {
  if (vailAccountVerify()) {
    return;
  }
  await getVerifyCodeAPI({
    account: registerData.value.account,
    source: registerData.value.source,
    type: sendType
  }).then(res => {
    resultCodeNotify(hint, "验证码发送", res)
    if (res.code === 200) {
      timerStart()
    }
  }).catch(error => {
    resultCodeNotify(hint, "验证码发送", error)
  })
}

/**
 * 注册 请求
 */
async function handleRegisterSubmit() {
    if (vailRegisterParamVerify()) {
      return;
    }
    await registerAccountAPI(registerData.value).then(res => {
      resultCodeNotify(hint, "注册", res)
      if (res.code === 200) {
        router.push("/login");
      }
    }).catch(error => {
      resultCodeNotify(hint, "注册", error)
    })
}

/**
 * 倒计时
 */
function timerStart() {
  initSecond.value = 60;
  timer.value = setInterval(() => {
    if (initSecond.value > 0) {
      initSecond.value--;
    } else {
      clearInterval(timer.value);
    }
  }, 1000);
}

/**
 * 停止倒计时
 */
function stopTimer() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
}

/**
 * 清空倒计时
 */
onUnmounted(() => {
  stopTimer(); // 在组件卸载时停止计时器
});


</script>

<style>
@import "../hooks/style/account.css";
</style>

